<template>
  <w-horizontal align="between" class="example">
    <w-vertical width="calc(50% - 10px)">
      <example-code v-for="item in w.examples.filter((v,i) => i%2==0)" :item="item"></example-code>
    </w-vertical>
    <w-vertical width="calc(50% - 10px)">
      <example-code v-for="item in w.examples.filter((v,i) => i%2==1)" :item="item"></example-code>
    </w-vertical>
  </w-horizontal>
</template>

<script>
  import ExampleCode from './ExampleCode.vue'
  import '../../public/syntaxhighlighter/shCoreDefault.css'
  let SyntaxHighlighter = require('../../public/syntaxhighlighter/shCore.js').SyntaxHighlighter
  
  export default {
    components: {
      ExampleCode
    },
    props: ['w'],
    mounted() {
      this.$nextTick(() => {
        SyntaxHighlighter.highlight()
      })
    }
  }
</script>

<style>
  .example {
  }

  .example h4 {
    margin: 0;
    padding: 7px 10px;
    background: rgb(202,224,230);
    border-left: 0 solid #4c96a6;
  }
  
  .example h4:nth-child(n+2) {
    margin-top: 15px;
  }
  
  .codeview-wrap {
    border: 1px solid #ddd;
    border-top: 0;
  }
  
  .codeview-pre .syntaxhighlighter-wrap {
    margin: 0;
    border: 0;
    max-width: 100%;
    background: #f5f5f5;
  }
  
  .codeview-gut {
    padding: 10px;
  }
  
  .codeview-tmpl {
    margin: 10px;
  }
  
  .code-toggle {
    border-top: 1px solid #ddd;
  }
  

</style>
